<template>
    <div>
        <el-card class="operate-container" shadow="never">
            <div>
                <el-button size="mini" class="btn-add" @click="secondAdd()" >新增分组</el-button>
                <el-button v-if="!isOneS" size="mini" class="btn-add" @click="handleSort()" >排序</el-button>
                <el-button v-if="isOneS" size="mini" class="btn-add" @click="handleSortC()" >取消</el-button>
                <el-button style="background-color: #4099ef;color: #fff;" v-if="isOneS" size="mini" class="btn-add" @click="handleSortS()" >提交</el-button>
            </div>
            <span class="btn-list" @click="refBtn(2)">刷新列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="secondTable"
                        :data="groupList"
                        row-key="id"
                        v-loading="listLoading"
                        style="width: 100%;"
                            border>
                <el-table-column label="拖拽排序" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-s-operation"></i>
                    </template>
                </el-table-column>
                <el-table-column label="分组顺序" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="分组名称（原名）" align="center">
                    <template slot-scope="scope">{{}}</template>
                </el-table-column> -->
                <el-table-column label="分组名称（简体|繁体）" align="center">
                    <template slot-scope="scope">{{scope.row.destinationGroupNameZh}} | {{scope.row.destinationGroupNameHk}}</template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.status ? '显示' : '隐藏'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="360" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                type="text"
                                @click="secondEdite(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button size="mini"
                                type="text"
                                @click="secondDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            :title="'新增/编辑'"
            :visible.sync="secondVisible"
            width="55%">
            <el-form :model="secondResource"
                    ref="secondForm"
                    :rules="rules"
                    label-width="150px" size="small">
                <!-- <el-form-item label="分组（原名）：" prop="destinationGroupNameZh">
                    <el-input :disabled="isEdit" v-model="secondResource.destinationGroupNameZh" placeholder="输入分组名称，该名称不可修改" style="width: 250px" maxlength="30"></el-input>
                </el-form-item> -->
                <el-form-item label="分组（简体中文）：" prop="destinationGroupNameZh">
                    <el-input v-model="secondResource.destinationGroupNameZh" style="width: 250px" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="分组（繁体中文）：" prop="destinationGroupNameHk">
                    <el-input v-model="secondResource.destinationGroupNameHk" style="width: 250px" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-radio-group v-model="secondResource.status">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="secondVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="secondDialogConfirm('secondForm')" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
 import {  groupList, groupDelete, groupAdd, groupUpdate, groupSort,  } from '@/api/app';
import Sortable from 'sortablejs';
export default {
    name: 'Group',
    data() {
        return {
            rules: {
                destinationGroupNameZh: [
                    { required: true, message: '请填写简体中文' }
                ],
                destinationGroupNameHk: [
                    { required: true, message: '请填写繁体中文' }
                ],
                status: [
                    { required: true, message: '请选择状态' }
                ],
            },
            isOneS: false,
            listLoading: false,
            groupList: [],
            secondVisible: false,
            secondResource: {
                id: null,
                status: 1,
                sort: null,
                updateTime: null,
                createTime: null,
                deleteYn: null,
                destinationGroupNameZh: null,
                destinationGroupNameHk: null,
            },
            isEdit: false,
            sortBoList: [],
            sortShow: null,
        }
    },
    mounted() {
        // this.$nextTick(() => {
        //     const el = this.$el.querySelector('.el-table__body-wrapper tbody');
        //     Sortable.create(el, {
        //         onEnd: (event) => {
        //             const { oldIndex, newIndex } = event;
        //             this.rowDrop(oldIndex, newIndex);
        //         }
        //     })
        // });
    },
    created() {
        this.secondList();
    },
    methods: {
        rowDrop(oldIndex, newIndex) {
            this.isOneS = true;
            const movedItem = this.groupList.splice(oldIndex, 1)[0];
            this.groupList.splice(newIndex, 0, movedItem);
            // const timeOld = this.groupList[oldIndex].sort;
            // const timeNew = this.groupList[newIndex].sort;
            // this.groupList[oldIndex].sort = timeNew;
            // this.groupList[newIndex].sort = timeOld;
        },
        secondAdd() {
            this.secondResource = {
                id: null,
                status: 1,
                sort: null,
                updateTime: null,
                createTime: null,
                deleteYn: null,
                destinationGroupNameZh: null,
                destinationGroupNameHk: null,
            };
            this.isEdit = false;
            this.secondVisible = true;
        },
        secondEdite(index, row) {
            this.secondResource = {
                id: row.id,
                status: row.status ? 1 : 0,
                sort: row.sort,
                updateTime: row.updateTime,
                createTime: row.createTime,
                deleteYn: row.deleteYn,
                destinationGroupNameZh: row.destinationGroupNameZh,
                destinationGroupNameHk: row.destinationGroupNameHk,
            };
            this.isEdit = true;
            this.secondVisible = true;
        },
        secondDelete(index, row) {
            this.$confirm('删除后该分组会被清除，你还要继续吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                groupDelete(row.id).then(response => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.secondList();
                });
            });
        },
        secondDialogConfirm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isEdit) {
                        groupUpdate(this.secondResource).then(res => {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.secondVisible = false;
                            this.secondList();
                        });
                    } else {
                        groupAdd(this.secondResource).then(res => {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.secondVisible = false;
                            this.secondList();
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        secondList() {
            this.listLoading = true;
            groupList().then(res => {
                setTimeout(() => {
                    this.listLoading = false;
                }, 300)
                this.groupList = res.data;
            });
        },
        refBtn(type) {
            this.secondList();
        },
        handleSort() {
            const el = this.$el.querySelector('.el-table__body-wrapper tbody');
            this.sortShow = Sortable.create(el, {
                onEnd: (event) => {
                    const { oldIndex, newIndex } = event;
                    this.rowDrop(oldIndex, newIndex);
                }
            })
            this.isOneS = true;
        },
        handleSortC() {
            this.sortShow.destroy();
            this.isOneS = false;
            this.secondList();
        },
        handleSortS() {
            this.sortBoList = [];
            this.groupList.forEach(item => {
                this.sortBoList.push(item.id)
            })
            this.$confirm('排序发生改变 确认是否提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                groupSort({idList: this.sortBoList}).then(res => {
                    this.isOneS = false;
                    this.sortShow.destroy();
                    this.secondList();
                    this.$message({
                        type: 'success',
                        message: '排序成功!'
                    });
                });
            });
        },
    }
}
</script>

<style lang="scss">
.btn-list {
    cursor: pointer;
}
</style>
